<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>道馆名称</p>
          <el-input v-model="clubPageListQO.clubName" placeholder="请输入道馆名称" clearable size="mini" />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>道馆状态</p>
          <el-select size="mini" placeholder="请选择道馆状态" filterable>
            <!-- <el-option v-for="item in items" :key="item" :label="item" :value="item" /> -->
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>经营模式</p>
          <el-select size="mini" placeholder="请选择经营模式" filterable>
            <!-- <el-option v-for="item in items" :key="item" :label="item" :value="item" /> -->
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>道馆负责人</p>
          <el-input v-model="clubPageListQO.name" placeholder="请输入道馆负责人" clearable size="mini" />
        </el-col>
        <el-col :span="4">
          <el-button style="margin-top:27px" type="primary" size="mini">{{ $t('button.query') }}</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20" class="gl_my_15">
      <el-col :md="6" :lg="4">
        <el-button type="primary" size="mini" @click="operateUserDialog('add')">新增道馆</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" size="mini" stripe>
      <el-table-column prop="type" label="道馆名称" width="180" />
      <el-table-column prop="type" label="道馆模式" width="180" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="{row}">
          <span class="gl_color_success">
            <span :class="row.status ? 'gl_color_success' : 'gl_color_error'">
              <i :class="row.status ? 'el-icon-success' : 'el-icon-error'" />
              {{ row.status }}
            </span>
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="type" label="道馆状态" width="180" /> -->
      <el-table-column prop="date" label="创建日期" width="180" />
      <el-table-column prop="name" label="道馆负责人" width="180" />
      <el-table-column label="操作" width="180">
        <template>
          <el-button type="text" size="small" @click="operateUserDialog('edit')">{{ $t('button.edit') }}</el-button>
          <!-- <el-button type="text" size="small" @click="operateUserDialog('edit')">审批</el-button> -->
          <el-button type="text" size="small" class="gl_color_error" @click="deleteRow">{{ $t('button.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div align="center" class="gl_py_10">
      <el-pagination
        :current-page="clubPageListQO.pageIndex"
        :page-size="clubPageListQO.pageSize"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </div>
    <el-dialog :title="dialogAddRolesType === 'add' ? '新增道馆' : '修改道馆'" width="880px" class="gl_dialog_TitleLine" :close-on-click-modal="false" :visible.sync="dialogAddRolesVisible">
      <el-scrollbar wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-form ref="refFormAddRole" label-width="120px" class="gl_px_10" :model="FormAddRoleVO" :rules="FormAddRoleVO_Rules">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-alert
                title="温馨提示"
                type="warning"
                :closable="false"
                description="为了确保您的门店信息真实有效，您提交的修改内容将会在审核后再同步到网站。因此会产生短暂的延时，敬请谅解！"
              />
            </el-col>
            <el-col :span="24">
              <el-form-item label="门店ID" size="mini">
                98281008
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="道馆名称" prop="name" size="mini">
                <el-input v-model="FormAddRoleVO.name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分道馆名称" prop="name" size="mini">
                <el-input v-model="FormAddRoleVO.name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属城市" prop="name" size="mini">
                <el-select size="mini" placeholder="请选择所属城市" filterable>
                  <!-- <el-option v-for="item in items" :key="item" :label="item" :value="item" /> -->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店电话" prop="name" size="mini">
                <el-select size="mini" placeholder="请选择所属城市" filterable>
                  <el-option label="手机号码" value="手机号码" />
                  <el-option label="座机号码" value="座机号码" />
                  <el-option label="400/800" value="400/800" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-input placeholder="请输入座机号码" size="mini">
                <template slot="prepend">010-</template>
              </el-input>
            </el-col>
            <el-col :span="24">
              <el-form-item label="营业时间" size="mini">
                营业时间
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="门店地址" size="mini">
                <el-input v-model="FormAddRoleVO.desc" clearable type="textarea" show-word-limit maxlength="100" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地图" size="mini">
                地图
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="门店照片" size="mini">
                门店照片
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="补充说明" size="mini">
                <el-input v-model="FormAddRoleVO.desc" clearable type="textarea" show-word-limit maxlength="150" placeholder="请提供修改以上信息的原因，帮助工作人员核实，150字以内" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogAddRolesVisible = false">{{ $t('button.cancel') }}</el-button>
        <el-button size="mini" type="primary" :loading="submitLoading" @click="confirmAddRole">{{ $t('button.save') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { translateByCode } from '@/lib/getTransData';
import { ClubPageListQO } from '@/lib/form/club';
export default {
  data() {
    return {
      clubPageListQO: new ClubPageListQO(),
      conten: '',
      tableData: [
        {
          type: '财务管理员',
          date: '2016-05-02',
          name: '王小虎',
          status: '营业',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          type: '财务管理员',
          date: '2016-05-04',
          name: '王小虎',
          status: '营业',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          type: '财务管理员',
          date: '2016-05-01',
          name: '王小虎',
          status: '营业',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          type: '财务管理员',
          date: '2016-05-03',
          name: '王小虎',
          status: '营业',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      totalPage: 0,
      dialogAddRolesVisible: false,
      dialogAddRolesType: '',
      submitLoading: false,
      checkedData: [],
      checkedIndex: 0,
      authorityType: [],
      roleList: [
        {
          name: '客户管理',
          code: 'KHGL',
          children: [
            {
              name: '客户管理',
              code: 'KHGL',
              checked: false,
              role: 'KHGL',
              children: [
                {
                  name: '编辑',
                  code: 'BJ',
                  id: '1-1',
                  checked: false
                },
                {
                  name: '删除',
                  code: 'SC',
                  id: '1-2',
                  checked: false
                }
              ]
            }, {
              name: '版本管理',
              code: 'BBGL',
              checked: false,
              role: 'KHGL',
              children: []
            },
            {
              name: '客户收到得短信',
              code: 'XX',
              checked: false,
              role: 'KHGL',
              children: []
            }
          ]
        },
        {
          name: '消息中心',
          code: 'XXZX',
          children: [
            {
              name: '收通知',
              code: 'STZ',
              checked: false,
              role: 'XXZX',
              children: [
                {
                  name: '编辑',
                  code: 'BJ',
                  id: '5-1',
                  checked: false
                },
                {
                  name: '删除',
                  code: 'SC',
                  id: '5-2',
                  checked: false
                }
              ]
            },
            {
              name: '写通知',
              code: 'XTZ',
              checked: false,
              role: 'XXZX',
              children: [
                {
                  name: '编辑',
                  code: 'BJ',
                  id: '6-1',
                  checked: false
                },
                {
                  name: '删除',
                  code: 'SC',
                  id: '6-2',
                  checked: false
                }
              ]
            }
          ]
        },
        {
          name: '身份管理',
          code: 'SFGL',
          children: [
            {
              name: '权限管理',
              code: 'QXGL',
              checked: false,
              role: 'SFGL',
              children: []
            }
          ]
        }
      ],
      FormAddRoleVO: {
        name: '',
        desc: '',
        authority: []
      },
      FormAddRoleVO_Rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        authority: []
      }
    };
  },
  computed: {
    // 全选功能
    allChecked: {
      get: function() {
        for (let i = 0; i < this.roleList.length; i += 1) {
          const checked = this.recursionStatus(this.roleList[i].children);
          if (!checked) {
            return false;
          }
        }
        return true;
      },
      set: function(val) {
        return val;
      }
    }
  },
  watch: {
    dialogAddRolesVisible(val) {
      if (!val) {
        this.$refs['refFormAddRole'].resetFields();
      }
    }
  },
  methods: {
    getPageData() {
      this.totalPage = 0;
    },
    sizeChange: function(pageSize) {
      this.clubPageListQO.pageSize = pageSize;
      this.getPageData();
    },
    pageIndexChange: function(pageIndex) {
      this.clubPageListQO.pageIndex = pageIndex;
      this.getPageData();
    },
    recursionStatus(data) {
      for (let i = 0; i < data.length; i += 1) {
        const item = data[i];
        if (!item.checked) {
          return false;
        }
        if (item.children && item.children.length > 0) {
          this.recursionStatus(item.children);
        }
      }
      return true;
    },
    recursion(data, val) {
      for (let i = 0; i < data.length; i += 1) {
        const item = data[i];
        item.checked = val;
        if (item.children && item.children.length > 0) {
          this.recursion(item.children, val);
        }
      }
    },
    operateUserDialog(type) {
      // this.dialogAddRolesType = type;
      // this.dialogAddRolesVisible = true;
      this.$router.push({
        path: '/clubManagement/pageList/addClub',
        query: {
          type: type
        }
      });
    },
    confirmAddRole() {
      this.submitLoading = true;
      for (let i = 0; i < this.roleList.length; i += 1) {
        // this.requiredRecursion(this.roleList[i].children);
        const require = this.requiredRecursion(this.roleList[i].children);
        console.log(require);
      }
      this.$refs['refFormAddRole'].validate(valid => {
        if (valid) {
          this.submitLoading = false;
          this.dialogAddRolesVisible = false;
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    deleteRow(row) {
      this.$confirm(`您确定要删除这条数据吗？`, '提示', {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: translateByCode('alert.deleteSuccessfully')
        });
      }).catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.authority-type {
  .el-button {
    margin: 10px 30px 0;
    box-sizing: border-box;
  }
}
</style>
